<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0">
    <title>HTML5 Game Development Company | HTML5 Game Developers</title>
    <link rel="shortcut icon" href="./img/favicon.png" type="images/x-icon" />
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/menu.css">
    <style>

    </style>
</head>

<body>
    <!-- 导航 -->
    <section>
        <div class="pc_menu">
            <div class="container pc_menu_box">
                <a href="./index.html"><img class="menu_logo" src="./img/logo.png" alt="logo"></a>
                <div class="menu_box">
                    <div class="menu_item menu_item_active">
                        <span class="menu_item_name _t">SERVICES</span>

                        <div class="menu_item_box">
                            <div class="ul">
                                <div class="li">
                                    <a href="./aaa_game_art.html">
                                        <img src="./img/menu_2.png" alt="art">
                                        <span class="_t">AAA Game Art</span>
                                    </a>
                                </div>
                                <div class="li">
                                    <a href="./html5_game_development_company.html">
                                        <img src="./img/menu_4.png" alt="h5">
                                        <span class="_t">HTML5 Game</span>
                                    </a>
                                </div>
                                <div class="li">
                                    <a href="./pc_game_development_company.html">
                                        <img src="./img/menu_3.png" alt="desktop">
                                        <span class="_t">Desktop Game</span>
                                    </a>
                                </div>
                                <div class="li">
                                    <a href="./unreal_engine_game_development_company.html">
                                        <img src="./img/menu_5.png" alt="unreal">
                                        <span class="_t">Unreal Engine
                                            Game</span>
                                    </a>
                                </div>
                                <div class="li">
                                    <a href="./mobile_game_development_company.html">
                                        <img src="./img/menu_1.png" alt="mobile">
                                        <span class="_t">Mobile Game</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="menu_item">
                        <a href="./case_studies.html" style="text-decoration: none;color:#fff"><span class="_t">CASE
                                STUDIES</span></a>
                    </div>
                    <div class="menu_item">
                        <a href="./all_games.html" style="text-decoration: none;color:#fff"><span
                                class="_t">GAMES</span></a>
                    </div>
                    <div class="menu_item ">
                        <a href="./index.html" style="text-decoration: none;color:#fff"><span class="_t">ABOUT
                                US</span></a>
                    </div>
                </div>
                <!-- <div class="menu_btn">CONTACT US</div> -->
                <img onclick="openMenu(true)" src="./img/menu.svg" alt="menu" class="mune_icon">
            </div>
        </div>
        <div class="h5_menu">
            <div onclick="openMenu(false)" class="menu_close_icon"></div>
            <div class="h5_menu_box">
                <div class="h5_menu_item" onclick="switchH5Menu(this)">
                    <div class="h5_menu_title">
                        <span class="_t">SERVICES</span>
                        <img src="./img/down.svg" alt="↓">
                    </div>
                    <div class="h5_menu_children">
                        <div class="h5_children_item">
                            <a href="./aaa_game_art.html" class="_t">AAA
                                Game Art</a>
                        </div>
                        <div class="h5_children_item">
                            <a href="./html5_game_development_company.html" class="_t">HTML5 Game</a>
                        </div>
                        <div class="h5_children_item">
                            <a href="./pc_game_development_company.html" class="_t">Desktop Game</a>
                        </div>
                        <div class="h5_children_item">
                            <a href="./unreal_engine_game_development_company.html" class="_t">Unreal Engine Game</a>
                        </div>
                        <div class="h5_children_item">
                            <a href="./mobile_game_development_company.html" class="_t">Mobile Game</a>
                        </div>
                    </div>
                </div>
                <div class="h5_menu_item">
                    <div class="h5_menu_title sigle_title">
                        <a href="./case_studies.html" style="text-decoration: none;color:#fff"><span class="_t">CASE
                                STUDIES</span></a>
                    </div>
                </div>
                <div class="h5_menu_item">
                    <div class="h5_menu_title sigle_title">
                        <a href="./all_games.html" style="text-decoration: none;color:#fff"><span
                                class="_t">GAMES</span></a>
                    </div>
                </div>
                <div class="h5_menu_item">
                    <div class="h5_menu_title sigle_title">
                        <a href="./index.html" style="text-decoration: none;color:#fff"><span class="_t">ABOUT
                                US</span></a>
                    </div>
                </div>
            </div>
            <script>
                // pc
                const pc_menu = document.querySelector('.pc_menu');
                window.addEventListener('scroll', () => {
                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                    if (scrollTop > 100) {
                        pc_menu.style.background = 'rgba(0,0,0,0.78)'
                    } else {
                        pc_menu.style.background = 'linear-gradient(180deg, #000, transparent)'
                    }
                });
                // h5
                function switchH5Menu(e) {
                    if (e.className.includes('h5_menu_item_active')) {
                        e.className = e.className.replace('h5_menu_item_active', '')
                    } else {
                        e.className = e.className + ' h5_menu_item_active'
                    }
                }
                function switchH5SubMenu(e, event) {
                    if (e.className.includes('h5_children_item_active')) {
                        e.className = e.className.replace('h5_children_item_active', '')
                    } else {
                        e.className = e.className + ' h5_children_item_active'
                    }
                    event.stopPropagation();
                }
                function openMenu(key) {
                    const h5_menu = document.querySelector('.h5_menu')
                    if (h5_menu) {
                        h5_menu.className = key ? 'h5_menu h5_menu_open' : 'h5_menu'
                    }
                }
            </script>
    </section>

    <!-- 首屏 -->
    <section class="section_1">
        <style>
            .section_1 {
                width: 100%;
                height: 100vh;
                background-image: url("./img/services/html5-game-development-company.jpg");
                background-size: cover;
                background-position: center;
                position: relative;
            }

            .section_1::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4));
                bottom: 0;
                left: 0;
                z-index: 0;
            }

            .section_1_box {
                position: absolute;
                left: 10%;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
                color: #fff;
            }

            .section_1_title {
                font-size: 54px;
                padding: 20px 0 30px;
                font-weight: 700;
                text-transform: uppercase;
            }

            .section_1_content {
                font-size: 18px;
                font-weight: 400;
                color: #3cd6ef;
                line-height: 35px;
                width: 50%;
            }

            .section_1_btn {
                display: flex;
                align-items: center;
                margin: 30px 0;
                background: #2d8ae5;
                color: #fff;
                width: fit-content;
                padding: 14px 26px;
                border-radius: 30px;
                font-size: 13px;
                font-weight: 600;
                border: 0;
            }

            .section_1_btn img {
                width: 20px;
                height: 18px;
                margin-left: 8px;
            }

            .section_1_navs {
                color: #fff;
                font-size: 14px;
            }

            .section_1_navs a {
                color: #fff;
                text-decoration: none;
            }

            .section_1_navs span {
                margin: 0 4px;
            }

            @media (max-width: 992px) {
                .section_1_content {
                    width: 70%;
                }

                .section_1_box {
                    left: 5%;
                }

                .section_1_title {
                    font-size: 34px;
                    padding: 10px 0 20px;
                }

                .section_1_content {
                    font-size: 16px;
                    line-height: 28px;
                }
            }

            @media (max-width: 576px) {
                .section_1 {
                    height: 80vh;
                }

                .section_1_content {
                    width: 95%;
                }

                .section_1_box {
                    left: 5%;
                }

                .section_1_title {
                    font-size: 24px;
                    padding: 6px 0 16px;
                }

                .section_1_content {
                    font-size: 15px;
                    line-height: 24px;
                }

                .section_1_btn {
                    padding: 10px 18px;
                    border-radius: 20px;
                    font-size: 13px;
                    font-weight: 600;
                    border: 0;
                }

                .section_1_navs {
                    font-size: 12px;
                }
            }
        </style>

        <div class="section_1_box">
            <div class="section_1_title _t">HTML5 Game Development</div>
            <div class="section_1_content _t">
               long_57
            </div>
            <div class="section_1_btn">
                <a href="#page_form" style="text-decoration: none;color:#fff" class="_t">REQUEST A QUOTE</a>
                <img src="./img/rr-white.svg" alt="→">
            </div>
            <div class="section_1_navs _t">
                <a class="_t">Home</a>
                <span>/</span>
                <a class="_t">Game Art Outsourcing Services</a>
                <span>/</span>
                <a class="_t">HTML5 Game Development</a>
            </div>
        </div>
    </section>

    <!-- our host -->
    <section class="section_2">
        <style>
            .section_2 {}

            .section_2_intro {
                font-size: 16px;
                line-height: 30px;
                text-align: center;
                padding: 50px 0;
            }

            .section_2_title {
                color: #4b535a;
                text-transform: uppercase;
                font-size: 42px;
                font-weight: 700;
                text-align: center;
                padding: 30px 0;
            }

            .section_2_box {
                display: flex;
                align-items: stretch;
                background-size: 100% 100%;
                margin-bottom: 10%;
            }

            .section_2_main {
                flex: 6;
            }

            .section_2_item {
                display: flex;
                align-items: flex-start;
                color: #fff;
                padding: 40px 10%;
            }

            .section_2_item_index {
                width: 100px;
                text-align: right;
                margin-right: 20px;
                flex-shrink: 0;
            }

            .section_2_item_index img {
                width: auto;
                height: 107px;
            }

            .section_2_item_content {
                flex: 1;
                overflow: hidden;
                font-weight: 400;
                font-size: 15px;
                line-height: 26px;
            }

            .section_2_item_title {
                color: #fff;
                font-weight: 700;
                font-size: 20px;
                margin-bottom: 12px;
            }

            .section_2_pic {
                flex: 4;
                position: relative;
            }

            .section_2_pic img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 160%;
            }

            .section_2_btns {
                text-align: center;
            }

            .section_2_btn {
                background: #2d8ae5;
                color: #fff;
                font-size: 18px;
                font-weight: 600;
                padding: 12px 36px;
                border-radius: 30px;
                display: inline-flex;
                align-items: center;
                margin: 0 auto;
                cursor: pointer;
                position: relative;
                top: -30px;
            }

            .section_2_btn img {
                width: 24px;
                height: 24px;
                margin-left: 8px;
            }

            @media (max-width: 992px) {
                .section_2_pic {
                    flex: 0;
                }


                .section_2_box_1 {
                    background: linear-gradient(90deg, #5974c0, #11acf1);
                    border-radius: 100px 0 0 0;
                    background-image: linear-gradient(90deg, #5974c0, #11acf1) !important;
                }

                .section_2_box_2 {
                    background: linear-gradient(90deg, #70aa50, #086);
                    border-radius: 0 100px 0 0;
                    background-image: linear-gradient(90deg, #70aa50, #086) !important;
                }

                .section_2_btn {
                    font-size: 15px;
                    font-weight: 600;
                    padding: 10px 28px;
                    border-radius: 22px;
                }

                .section_2_btn img {
                    width: 16px;
                    height: 16px;
                    margin-left: 8px;
                }
            }
        </style>

        <div class="container">
            <div class="section_2_intro _t">long_58</div>
            <div class="section_2_title _t">OHGDS</div>

            <div class="section_2_box section_2_box_1"
                style="background-image: url('./img/services/UD_ContentBanner01.jpg');">
                <div class="section_2_main">
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo01.png" alt="1">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">Game Development</div>
                            <div class="_t">
                               long_59
                            </div>
                        </div>
                    </div>
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo02.png" alt="2">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">Promotional Games</div>
                            <div class="_t">
                                long_60
                            </div>
                        </div>
                    </div>
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo03.png" alt="3">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">Games of Different Genres</div>
                            <div class="_t">
                             long_61
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section_2_pic">
                    <img src="./img/services/html5-game-development-services-we-provide.webp" alt="img">
                </div>
            </div>

            <div class="section_2_box section_2_box_2"
                style="background-image: url('./img/services/UD_ContentBanner02.jpg');">
                <div class="section_2_pic">
                    <img src="./img/services/services-offered-for-html5-game-development.webp" alt="img">
                </div>
                <div class="section_2_main">
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo01.png" alt="1">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">Prototyping</div>
                            <div class="_t">
                               long_62
                            </div>
                        </div>
                    </div>
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo02.png" alt="2">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">WebXR Development</div>
                            <div class="_t">
                               long_63
                            </div>
                        </div>
                    </div>
                    <div class="section_2_item">
                        <div class="section_2_item_index">
                            <img src="./img/services/UD_ServiceCountNo03.png" alt="3">
                        </div>
                        <div class="section_2_item_content">
                            <div class="section_2_item_title _t">HTML5 Support and Maintenance</div>
                            <div class="_t">
                              long_64
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section_2_btns">
                <div class="section_2_btn">
                    <a href="#page_form" style="text-decoration: none;color:#fff" class="_t">GET IN TOUCH WITH OUR TEAM</a>
                    <img src="./img/rr-white.svg" alt="→">
                </div>
            </div>
        </div>
    </section>

    <!-- brands -->
    <!-- <section class="section_3">
        <style>
            .section_3 {
                padding: 50px 0;
            }
        </style>
        <div class="container section_title">
            <div class="section_subtitle">BRANDS</div>
            <div>
                <span>WE </span>
                <span class="section_title_primary">WORKED FOR</span>
            </div>

            <div class="section_brands">
                <div class="section_brands_scroll">
                    <img class="section_brands_item" src="./img/bands/20thCenturyFox.jpg" alt="20thCenturyFox">
                    <img class="section_brands_item" src="./img/bands/Amzon.jpg" alt="Amzon">
                    <img class="section_brands_item" src="./img/bands/Animoca.jpg" alt="Animoca">
                    <img class="section_brands_item" src="./img/bands/Disney.jpg" alt="Disney">
                    <img class="section_brands_item" src="./img/bands/GamesWorkShop.jpg" alt="GamesWorkShop">
                    <img class="section_brands_item" src="./img/bands/Ieee.jpg" alt="Ieee">
                    <img class="section_brands_item" src="./img/bands/Logo-NBA.jpg" alt="Logo-NBA">
                    <img class="section_brands_item" src="./img/bands/Logo-Wicked.jpg" alt="Logo-Wicked">
                    <img class="section_brands_item" src="./img/bands/Puma.jpg" alt="Puma">
                    <img class="section_brands_item" src="./img/bands/Sony-Logo.jpg" alt="Sony-Logo">
                    <img class="section_brands_item" src="./img/bands/WB.jpg" alt="WB">
                </div>
            </div>
        </div>

        <script>
            const section_brands_scroll = document.querySelector('.section_brands_scroll')
            const section_brands_items = document.querySelectorAll('.section_brands_item')
            let left = 0
            section_brands_scroll.style.transform = `translateX(-${left}px)`
            setTimeout(() => {
                left = 200
                section_brands_scroll.style.transform = `translateX(-${left}px)`
            }, 0)
            setInterval(() => {
                left += 200
                if (left > (section_brands_items.length + 1) * 220 - 120 - section_brands_scroll.clientWidth) {
                    left = 0
                }
                section_brands_scroll.style.transform = `translateX(-${left}px)`
            }, 2000)
        </script>
    </section> -->

    <!-- testimonials -->
    <section class="section_4">
        <style>
            .section_4 {
                padding: 50px 0;
            }
        </style>
        <div class="container section_title">
            <div class="section_subtitle" class="_t">TESTIMONIALS</div>
            <div>
                <span class="_t">WHAT OUR</span>
                <span class="section_title_primary _t">CLIENTS
                    SAY</span>
            </div>

            <div class="section_testimonials">
                <div class="section_testimonials_scroll">
                    <div class="section_testimonials_item">
                        <div class="section_testimonials_item_info _t">long_2</div>
                        <div class="section_testimonials_item_title _t">Liam
                            Yu</div>
                        <div class="section_testimonials_item_subtitle _t">Vice
                            President, Group IT – Emirates NBD</div>
                        <!-- <img class="section_testimonials_item_img" src="./img/home/emirates-nbd-log.webp"
                    alt="emirates-nbd-log"> -->
                    </div>
                    <div class="section_testimonials_item">
                        <div class="section_testimonials_item_info _t">long_3</div>
                        <div class="section_testimonials_item_title _t">David
                            Bohr</div>
                        <div class="section_testimonials_item_subtitle _t">General
                            Manager, Erosnow Games</div>
                        <!-- <img class="section_testimonials_item_img" src="./img/home/eros-now-logo-1.jpg"
                    alt="eros-now-logo-1"> -->
                    </div>
                    <div class="section_testimonials_item">
                        <div class="section_testimonials_item_info _t">long_4</div>
                        <div class="section_testimonials_item_title _t">William
                            Hu</div>
                        <div class="section_testimonials_item_subtitle _t">Sr.
                            Project Manager - Amazon</div>
                        <!-- <img class="section_testimonials_item_img" src="./img/home/Amazon-logo.jpg" alt="Amazon-logo"> -->
                    </div>
                    <div class="section_testimonials_item">
                        <div class="section_testimonials_item_info _t">long_5</div>
                        <div class="section_testimonials_item_title _t">Noah
                            Guo</div>
                        <div class="section_testimonials_item_subtitle _t">Director-
                            Wicked Witch Studios</div>
                        <!-- <img class="section_testimonials_item_img" src="./img/home/wicker.jpg" alt="wicker"> -->
                    </div>
                </div>
            </div>
            <div class="section_testimonials_control">
                <div class="section_testimonials_btn" onclick="testimonialPage(-1)">
                    <span class="_t">PREV</span>
                    <img style="transform:rotate(180deg)" src="./img/rr.svg" alt="←">
                </div>
                <div class="section_testimonials_point"></div>
                <div class="section_testimonials_btn" onclick="testimonialPage(1)">
                    <img src="./img/rr.svg" alt="→">
                    <span class="_t">NEXT</span>
                </div>
            </div>
        </div>
        <script>
            const section_testimonials_scroll = document.querySelector('.section_testimonials_scroll')
            const section_testimonials_items = document.querySelectorAll('.section_testimonials_item')
            let page = 0
            function testimonialPage(step) {
                page += step
                if (page < 0) page = section_testimonials_items.length - 1
                if (page >= section_testimonials_items.length) page = 0
                let w = 0
                if (document.body.clientWidth > 992) {
                    w = 440 + 20
                } else if (document.body.clientWidth > 576) {
                    w = 240 + 20
                } else {
                    w = 400 + 20
                }
                console.error(page, w)
                section_testimonials_scroll.style.transform = `translateX(-${w * page}px)`
            }
        </script>
    </section>

    <!-- why us -->
    <section class="section_5">
        <style>
            .section_5 {
                padding: 30px 15px 90px 15px;
                background-color: #2d8ae5;
            }
        </style>
        <div class="container whyus_box">
            <div class="whyus_title1 _t">Why choose us</div>
            <div class="whyus_steps">
                <div class="whyus_step whyus_step1" style="border-radius: 5rem 0 5rem 5rem;">
                    <div class="whyus_step_title">
                        <b>01</b>
                        <span class="_t">EXPERIENCE</span>
                    </div>
                    <div class="whyus_step_info _t">long_10</div>
                </div>
                <div class="whyus_step whyus_step2" style="border-radius: 5rem 5rem 5rem 0;">
                    <div class="whyus_step_title">
                        <b>02</b>
                        <span CLASS="_t">END-TO-END GAME
                            DEVELOPMENT</span>
                    </div>
                    <div class="whyus_step_info _t">long_11</div>
                </div>
                <div class="whyus_step whyus_step3" style="border-radius: 5rem 0 5rem 5rem;">
                    <div class="whyus_step_title">
                        <b>03</b>
                        <span class="_t">FULLY-FLEDGED ART & DESIGN
                            TEAM</span>
                    </div>
                    <div class="whyus_step_info _t">long_12</div>
                </div>
                <div class="whyus_step whyus_step4" style="border-radius: 0 5rem 5rem 5rem;">
                    <div class="whyus_step_title">
                        <b>04</b>
                        <span class="_t">LIVE OPERATIONS &
                            SUPPORT</span>
                    </div>
                    <div class="whyus_step_info _t">long_13</div>
                </div>
            </div>
            <div class="whyus_more">
                <div class="whyus_more_title1 _t">TO EXECUTE</div>
                <div class="whyus_more_title2 _t">THE GAME IDEA YOU
                    HAVE?</div>
                <div class="whyus_more_title3 _t">long_14</div>
                <div class="whyus_more_btn"><a href="#page_form" class="_t">Talk to Our Experts</a></div>
            </div>
        </div>
    </section>

    <!-- recent projects -->
    <section class="section_6">
        <style>
            .section_6 {
                padding: 80px 15px 15px 15px;
                background-color: #fff;
                text-align: center;
            }
        </style>
        <div class="container section_title">
            <div>
                <span style="color: #4b535a;" class="_t">Our
                    Experience</span>
            </div>
        </div>

        <div class="recent_projects">
            <div class="recent_projects_item">
                <img src="./img/home/recent/MPL_Pool_Portfolio2019.jpg" alt="p1">
                <div class="recent_projects_inner">
                    <div class="_t">ADVENTURE QUEST BATTLE GEMS</div>
                    <span class="_t">A FANTASY-THEMED PUZZLE GAME</span>
                </div>
            </div>
            <div class="recent_projects_item">
                <img src="./img/home/recent/PortfolioWeb2020_BattleGems-768x576.jpg" alt="p1">
                <div class="recent_projects_inner">
                    <div class="_t">PRO FEEL GOLF</div>
                    <span class="_t">A SIMPLE AND ADDICTIVE GAME</span>
                </div>
            </div>
            <div class="recent_projects_item">
                <img src="./img/home/recent/PortfolioWeb2020_Golf.jpg" alt="p1">
                <div class="recent_projects_inner">
                    <div class="_t">SUPER CLUB SOCCER</div>
                    <span class="_t">GREAT SUCCOR FOR SOCCER
                        ENTHUSIASTS!</span>
                </div>
            </div>
            <div class="recent_projects_item">
                <img src="./img/home/recent/PortfolioWeb2020_SCS.jpg" alt="p1">
                <div class="recent_projects_inner">
                    <div class="_t">MPL POOL GAME</div>
                    <span class="_t">HOW ABOUT A NICE GAME OF
                        POOL?</span>
                </div>
            </div>
        </div>

    </section>

    <!-- process -->
    <section class="section_8">
        <style>
            .section_8 {
                padding: 80px 0;
                background-color: #061b2c;
            }

            .section_process {
                position: relative;
            }

            .section_process_title {
                font-size: 60px;
                font-weight: 700;
                color: #fff;
                z-index: 9;
                position: relative;
            }

            .section_process_title span {
                color: #2d8ae5;
            }

            .section_process_items {
                position: relative;
                z-index: 9;
            }

            .section_process_bg {
                top: 50%;
                transform: translateY(-50%);
                left: -30%;
                position: absolute;
                z-index: 1;
                width: 120%;
                height: auto;
            }

            .section_process_items {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .section_process_item {
                text-align: center;
                padding: 50px 20px 40px 20px;
                border-radius: 50px;
                border: 5px solid #2d8ae5;
                position: relative;
                color: #fff;
                font-size: 15px;
                font-weight: 500;
                line-height: 30px;
                margin-bottom: 0px;
                margin-top: 100px;
                width: 500px;
            }

            .section_process_name {
                color: #2d8ae5;
                font-size: 25px;
                font-weight: 700;
                margin-bottom: 30px;
                text-transform: uppercase;
            }

            .section_process_num {
                background-color: #2d8ae5;
                width: 80px;
                height: 80px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 35px;
                font-weight: 600;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: -50px;
                transform: translateX(-50%);
            }

            @media (min-width: 1200px) {
                .section_process_item_1 {
                    left: -100px;
                    top: 40px;
                }

                .section_process_item_2,
                .section_process_item_3,
                .section_process_item_4,
                .section_process_item_5 {
                    left: 300px;
                }

                .section_process_item_6 {
                    left: -200px;
                    top: -50px;
                }
            }

            @media (max-width: 1200px) {
                .section_process_title {
                    text-align: center;
                    font-size: 45px;
                }

                .section_process_bg {
                    display: none;
                }
            }

            @media (max-width: 992px) {
                .section_process_title {
                    text-align: center;
                    font-size: 32px;
                }

                .section_process_bg {
                    display: none;
                }
            }

            @media (max-width: 576px) {
                .section_process_title {
                    text-align: center;
                    font-size: 22px;
                }

                .section_process_bg {
                    display: none;
                }

                .section_process_item {
                    padding: 30px 10px 20px 10px;
                    border-radius: 30px;
                    border: 4px solid #2d8ae5;
                    font-size: 13px;
                    line-height: 22px;
                    margin-top: 60px;
                    width: 100%;
                }

                .section_process_num {
                    width: 50px;
                    height: 50px;
                    font-size: 20px;
                    top: -30px;
                }

                .section_process_name {
                    font-size: 18px;
                    margin-bottom: 10px;
                }
            }
        </style>

        <div class="container section_process">
            <div class="section_process_title"><span class="_t">OUR HTML5 GAME</span> <br /> <span class="_t">DEVELOPMENT PROCESS</span></div>
            <div class="section_process_items">
                <div class="section_process_item section_process_item_1">
                    <div class="section_process_num">1</div>
                    <div class="section_process_name _t">REQUIREMENT GATHERING</div>
                    <div class="_t">long_65</div>
                </div>
                <div class="section_process_item section_process_item_2">
                    <div class="section_process_num">2</div>
                    <div class="section_process_name _t">RESEARCH AND GAME DESIGN</div>
                    <div class="_t">
                        long_66
                    </div>
                </div>
                <div class="section_process_item section_process_item_3">
                    <div class="section_process_num">3</div>
                    <div class="section_process_name _t">ART AND DESIGN PRODUCTION</div>
                    <div class="_t">long_67</div>
                </div>
                <div class="section_process_item section_process_item_4">
                    <div class="section_process_num">4</div>
                    <div class="section_process_name _t">GAME DEVELOPMENT</div>
                    <div class="_t">long_68</div>
                </div>
                <div class="section_process_item section_process_item_5">
                    <div class="section_process_num">5</div>
                    <div class="section_process_name _t">LIVE OPERATIONS</div>
                    <div class="_t">long_69</div>
                </div>
                <div class="section_process_item section_process_item_6">
                    <div class="section_process_num">6</div>
                    <div class="section_process_name _t">Release and Maintenance </div>
                    <div class="_t">long_70</div>
                </div>
            </div>
            <img class="section_process_bg" src="./img/services/html5-game-development-process.webp" alt="process">
        </div>
    </section>

    <!-- about us -->
    <section class="section_7">
        <style>
            .section_7 {
                padding: 60px 15px 15px 15px;
                background-color: #fff;
            }
        </style>
        <div class="container section_title">
            <div class="section_subtitle _t">ABOUT US</div>
        </div>

        <div class="container about_us">

            <div class="about_us_item">
                <img src="./img/home/AboutIcon01.png" alt="icon">
                <div class="about_us_content">
                    <div class="about_us_title _t">TAILORED FOR ALL
                        TYPES OF CLIENTELE</div>
                    <div class="about_us_info _t">long_15</div>
                </div>
            </div>

            <div class="about_us_item">
                <img src="./img/home/AboutIcon02.png" alt="icon">
                <div class="about_us_content">
                    <div class="about_us_title _t">WE KNOW EVERYTHING
                        ABOUT GAMES</div>
                    <div class="about_us_info _t">long_16</div>
                </div>
            </div>

            <div class="about_us_item">
                <img src="./img/home/AboutIcon03.png" alt="icon">
                <div class="about_us_content">
                    <div class="about_us_title _t">Enriching talent
                        pool</div>
                    <div class="about_us_info _t">long_17</div>
                </div>
            </div>

            <div class="about_us_item">
                <img src="./img/home/AboutIcon04.png" alt="icon">
                <div class="about_us_content">
                    <div class="about_us_title _t">RESULT-ORIENTED
                        PROCESS</div>
                    <div class="about_us_info _t">long_18</div>
                </div>
            </div>

        </div>
    </section>

    <!-- form -->
    <section class="section_10" id="page_form">
        <style>
            .section_10 {
                padding: 80px 0;
                background: url("./img/home/form/ContactUs_Panel-1.webp");
                background-size: 100% 100%;
                position: relative;
            }
        </style>
        <div class="form_container">
            <div class="form_container_title1 _t">Let's</div>
            <div class="form_container_title2 _t">Work Together</div>
            <div class="form_container_title3 _t">Please fill in the
                form and our representative will get back to you.
            </div>

            <div class="form_box">
                <div class="form_box_line"></div>
                <input class="form_box_item form_name" placeholder="Name*" type="text">
                <input class="form_box_item form_email" placeholder="E-Mail*" type="text">
                <input class="form_box_item form_mobile" placeholder="Mobile*" type="text">
                <input class="form_box_item form_topic" placeholder="Topic*" type="text">
                <textarea class="form_box_item form_box_area form_require"
                    placeholder="Share Your Requirement!*"></textarea>
                <div class="form_box_btn" onclick="submit()">
                    <span class="_t">REQUEST A QUOTE</span>
                </div>

                <img class="form_box_left" src="./img/home/form/ContactUs_Ch01.webp" alt="img">
                <img class="form_box_right" src="./img/home/form/ContactUs_Ch02.webp" alt="img">
            </div>
        </div>

        <script>
            let submit_loading = false
            const form_box_btn = document.querySelector('.form_box_btn')
            function submit() {
                if (submit_loading) return
                // 输入校验
                const form_name = document.querySelector('.form_name').value
                const form_email = document.querySelector('.form_email').value
                const form_mobile = document.querySelector('.form_mobile').value
                const form_topic = document.querySelector('.form_topic').value
                const form_require = document.querySelector('.form_require').value
                if (!form_name) return alert(getTranslate("Please enter your name"))
                if (!form_email) return alert(getTranslate("Please enter your email"))
                if (!form_mobile) return alert(getTranslate("Please enter your mobile number"))
                if (!form_topic) return alert(getTranslate("Please enter your topic"))
                if (!form_require) return alert(getTranslate("Please enter your requirement"))

                if (!validateEmail(form_email)) return alert(getTranslate("Please enter a valid email address"))
                if (!validateNumberString(form_mobile)) return alert(getTranslate("Please enter a valid mobile number"))

                submit_loading = true
                form_box_btn.style.opacity = '0.5'
                setTimeout(() => {
                    const form_box_item = document.querySelectorAll('.form_box_item')
                    form_box_item.forEach(item => {
                        item.value = ''
                    })
                    alert("Submitted successfully!")
                    submit_loading = false
                    form_box_btn.style.opacity = '1'
                }, 500)
            }
            function validateEmail(email) {
                const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return re.test(email);
            }
            function validateNumberString(str) {
                const re = /^(\+?[0-9]+)$/;
                return re.test(str);
            }
        </script>
    </section>

    <!-- bottom -->
    <section class="section_bottom">
        <div class="container section_bottom_box">

            <!-- navs -->
            <div class="bottom_navs">
                <div class="bottom_services_pc">
                    <!-- <div class="bottom_services_pc_title">Services</div> -->
                    <div class="bottom_nav">
                        <div class="bottom_nav_title bottom_services_title bottom_nav_title2 _t">Game
                            Development
                            Services
                        </div>
                        <a href="./aaa_game_art.html" class="bottom_nav_link _t">AAA Game Art</a>
                        <a href="./html5_game_development_company.html" class="bottom_nav_link _t">HTML5 Game</a>
                        <a href="./pc_game_development_company.html" class="bottom_nav_link _t">Desktop Game</a>
                        <a href="./unreal_engine_game_development_company.html" class="bottom_nav_link _t">Unreal Engine
                            Game</a>
                        <a href="./mobile_game_development_company.html" class="bottom_nav_link _t">Mobile Game</a>
                    </div>
                </div>
                <div class="bottom_services_h5">
                    <div class="bottom_nav">
                        <div class="bottom_nav_title bottom_services_title bottom_nav_title2 _t">Game
                            Development
                            Services
                        </div>
                        <a href="./aaa_game_art.html" class="bottom_nav_link _t">AAA Game Art</a>
                        <a href="./html5_game_development_company.html" class="bottom_nav_link _t">HTML5 Game</a>
                        <a href="./pc_game_development_company.html" class="bottom_nav_link _t">Desktop Game</a>
                        <a href="./unreal_engine_game_development_company.html" class="bottom_nav_link _t">Unreal Engine
                            Game</a>
                        <a href="./mobile_game_development_company.html" class="bottom_nav_link _t">Mobile Game</a>
                    </div>
                </div>
                <div class="bottom_right">
                    <div class="bottom_nav">
                        <div class="bottom_nav_title bottom_services_title bottom_nav_title2 _t">Case
                            Studies</div>
                        <a href="./case_studies.html" class="bottom_nav_link _t">Our
                            Experience</a>
                    </div>
                    <div class="bottom_nav">
                        <div class="bottom_nav_title bottom_services_title bottom_nav_title2 _t">Games</div>
                        <a href="./all_games.html" class="bottom_nav_link _t">Games</a>
                    </div>
                </div>
            </div>

            <!-- our offices -->
            <div class="our_offices">
                <div class="our_offices_item">
                    <div CLASS="our_offices_ouroffices _t">OUR
                        OFFICES</div>
                    <div class="our_offices_title">
                        <span>Netherlands</span>
                        <img src="./img/bottom/hl.svg" alt="Netherlands">
                    </div>
                    <div class="our_offices_box">
                        <div class="our_offices_orange">Zuid-Holland</div>
                        <div>Rotterdam <br /> Gemertwal 103</div>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/phone.svg" alt="phone">
                        <a href="tel: +0684940432"> +0684940432</a>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/message.svg" alt="phone">
                        <a href="mailto:manaladjames98@gmail.com">manaladjames98@gmail.com</a>
                    </div>
                </div>
                <div class="our_offices_item">
                    <div class="our_offices_title">
                        <span>台灣</span>
                        <img src="./img/bottom/tw.svg" alt="tw">
                    </div>
                    <div class="our_offices_box">
                        <div class="our_offices_orange">台北市</div>
                        <div>大同區西寧北路78之18號</div>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/phone.svg" alt="phone">
                        <a href="tel: +049902326"> +049902326</a>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/message.svg" alt="phone">
                        <a href="mailto:manaladjames98@gmail.com">manaladjames98@gmail.com</a>
                    </div>
                </div>
                <div class="our_offices_item">
                    <div class="our_offices_title">
                        <span>United States</span>
                        <img src="./img/bottom/usa.svg" alt="United States">
                    </div>
                    <div class="our_offices_box">
                        <div class="our_offices_orange">New Mexico</div>
                        <div>Cimarron <br /> 50 Turkey Roost Ln </div>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/phone.svg" alt="phone">
                        <a href="tel: +049902326"> +049902326</a>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/message.svg" alt="phone">
                        <a href="mailto:manaladjames98@gmail.com">manaladjames98@gmail.com</a>
                    </div>
                </div>
                <div class="our_offices_item">
                    <div class="our_offices_title">
                        <span>United Kingdom</span>
                        <img src="./img/bottom/eu.svg" alt="United Kingdom">
                    </div>
                    <div class="our_offices_box">
                        <div class="our_offices_orange _t">Rhosneigr</div>
                        <div class="_t">High St, Rhosneigr </div>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/phone.svg" alt="phone">
                        <a href="tel: +049902326"> +049902326</a>
                    </div>
                    <div class="our_offices_concat">
                        <img src="./img/bottom/message.svg" alt="phone">
                        <a href="mailto:manaladjames98@gmail.com">manaladjames98@gmail.com</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- copyright -->
        <div class="bottom_copyright">
            <div class="bottom_copyright_box">COPYRIGHT © <a href="https://www.Super Inspirationstudio.com">2024
                    Super
                    Inspiration
                    PRIVATE LIMITED</a> | <a href="/privacy-policy">Privacy Policy</a> | <a
                    href="/wp-content/themes/Super InspirationTheme/pdf/Terms-Conditions-Product.pdf"
                    target="_blank">Terms
                    &amp; Conditions</a> | <a
                    href="/wp-content/themes/Super InspirationTheme/pdf/Refund Policy for Service Cancellation.pdf"
                    target="_blank">Refund Policy</a> | <a
                    href="/wp-content/themes/Super InspirationTheme/pdf/Privacy Policy Product.pdf"
                    target="_blank">Privacy
                    Policy Product</a> | <a href="/security">Security</a> | <a href="/sitemap">Sitemap</a></div>
            <div class="bottom_copyright_icons">
                <img class="bottom_copyright_icon" src="./img/bottom/facebook.svg" alt="facebook">
                <img class="bottom_copyright_icon" src="./img/bottom/artstation.svg" alt="artstation">
                <img class="bottom_copyright_icon" src="./img/bottom/behance.svg" alt="behance">
                <img class="bottom_copyright_icon" src="./img/bottom/linkedin.svg" alt="linkedin">
                <img class="bottom_copyright_icon" src="./img/bottom/youtube3.svg" alt="youtube">
                <img class="bottom_copyright_icon" src="./img/bottom/skype.svg" alt="skype">
            </div>
        </div>
    </section>

    <script src="./js/lang.js"></script>
</body>

</html>